<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="queryInfo" ref="queryInfo" class="demo-form-inline">
        <el-form-item label="活动名" prop="activityName" >
          <el-input v-model="queryInfo.activityName" type="text" @clear="getDynamicList" maxlength="11" minlength="2" show-word-limit clearable placeholder="活动名"></el-input>
        </el-form-item>
        <el-form-item label="发布人姓名" prop="realName">
          <el-input v-model="queryInfo.realName" type="text" @clear="getDynamicList" maxlength="10" minlength="2" show-word-limit clearable placeholder="发布人姓名"></el-input>
        </el-form-item>

        <el-form-item label="学号" prop="nickname">
          <el-input v-model="queryInfo.nickname" type="text" @clear="getDynamicList" maxlength="10" minlength="1" show-word-limit clearable placeholder="学号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="info" @click="getDynamicList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetQuery">重置查询/刷新</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="filterTable" :data="tableData" style="width: 100%" stripe  @selection-change="handleSelectionChange">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
        <el-table-column prop="activityName" label="活动名" width="150"></el-table-column>
        <el-table-column prop="realName" label="发布人" width="150"></el-table-column>
        <el-table-column prop="profileId" label="学号" width="100"></el-table-column>
        <el-table-column prop="state" label="状态" width="100" :filters="[{ text: '未结束', value: 'UNDONE' }, { text: '已经结束', value: 'DONE' }]" :filter-method="filterState" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state==='UNDONE'? 'success' :'info' " disable-transitions>{{scope.row.state}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button size="mini" type="info" @click="handleView(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
      </el-table>
      <!--底部分页-->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="queryInfo.pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>


    <!--  弹出新增对话框-->
<!--    <el-dialog title="新增活动" :visible.sync="addDialogVisible" width="50%" @close="closeDialog">-->

<!--      <el-form :model="addForm" :rules="addRules" inline ref="addForm" label-width="100px">-->

<!--        <el-form-item label="学号" prop="profileId" >-->
<!--          <el-input v-model.number="addForm.profileId" type="text" maxlength="15" show-word-limit clearable placeholder="学号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="真实姓名" prop="realName">-->
<!--          <el-input v-model="addForm.realName" type="text" maxlength="10" minlength="2" show-word-limit clearable placeholder="真实姓名"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号" prop="phone">-->
<!--          <el-input v-model.number="addForm.phone" type="text" maxlength="15" minlength="10" show-word-limit clearable placeholder="手机号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="专业" prop="marjor">-->
<!--          <el-input v-model="addForm.marjor" type="text" maxlength="20" minlength="2" show-word-limit clearable placeholder="专业"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属梯队" prop="group">-->
<!--          <el-input v-model="addForm.group" type="text"  maxlength="10" minlength="2" show-word-limit clearable placeholder="所属梯队"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="呢称" prop="nickname">-->
<!--          <el-input v-model="addForm.nickname" type="text"  maxlength="10" minlength="1" show-word-limit clearable placeholder="呢称"></el-input>-->
<!--        </el-form-item>-->



<!--        <el-form-item label="上传头像" prop="addImageList">-->
<!--          <el-upload action="http://localhost:8088/files/upload"  :auto-upload="false"  :on-remove="handleRemove" :on-error="filesUploadError" :file-list="addImageList" ref="upload1" :on-success="filesUploadSuccess" :limit="1" list-type="picture-card" :on-preview="handlePictureCardPreview">-->
<!--            <i class="el-icon-plus"></i>-->
<!--          </el-upload>-->

<!--          <el-dialog :visible.sync="imageDialogVisible">-->
<!--            <img width="100%" :src="dialogImageUrl" alt="">-->
<!--          </el-dialog>-->

<!--        </el-form-item>-->

<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="cancelAddForm">取 消</el-button>-->
<!--    <el-button type="primary"  @click="submitForm">确 定</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->


<!--    &lt;!&ndash;弹出编辑对话框&ndash;&gt;-->
<!--    <el-dialog title="编辑活动" :visible.sync="editDialogVisible" width="50%" @close="closeEditDialog">-->

<!--      <el-form :model="editForm" :rules="editRules" inline ref="editForm" label-width="150px">-->

<!--        <el-form-item label="学号" prop="profileId" >-->
<!--          <el-input v-model.number="editForm.profileId" type="text" maxlength="15" show-word-limit clearable placeholder="学号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="真实姓名" prop="realName">-->
<!--          <el-input v-model="editForm.realName" type="text" maxlength="10" minlength="2" show-word-limit clearable placeholder="真实姓名"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号" prop="phone">-->
<!--          <el-input v-model.number="editForm.phone" type="text" maxlength="15" minlength="10" show-word-limit clearable placeholder="手机号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="专业" prop="marjor">-->
<!--          <el-input v-model="editForm.marjor" type="text" maxlength="20" minlength="2" show-word-limit clearable placeholder="专业"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属梯队" prop="group">-->
<!--          <el-input v-model="editForm.group" type="text"  maxlength="10" minlength="2" show-word-limit clearable placeholder="所属梯队"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="呢称" prop="nickname">-->
<!--          <el-input v-model="editForm.nickname" type="text"  maxlength="10" minlength="1" show-word-limit clearable placeholder="呢称"></el-input>-->
<!--        </el-form-item>-->



<!--        <el-form-item label="上传头像" prop="editImageList">-->
<!--          <el-upload action="http://localhost:8088/files/upload"  :auto-upload="false"  :on-remove="handleEditRemove" :on-error="filesEditUploadError" :file-list="editImageList" ref="upload2" :on-success="filesEditUploadSuccess" :limit="1" list-type="picture-card" :on-preview="handlePictureCardPreview">-->
<!--            <i class="el-icon-plus"></i>-->
<!--          </el-upload>-->

<!--          <el-dialog :visible.sync="imageDialogVisible">-->
<!--            <img width="100%" :src="dialogImageUrl" alt="">-->
<!--          </el-dialog>-->

<!--        </el-form-item>-->

<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="cancelEditAddForm">取 消</el-button>-->
<!--    <el-button type="primary"  @click="submitEditForm">确 定</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->
    <el-drawer title="动态信息" :visible.sync="viewDrawer" size="40%" >
      <el-descriptions >
        <el-descriptions-item label="发布人">{{viewForm.realName}}</el-descriptions-item>
        <el-descriptions-item label="学号" >{{viewForm.profileId}}</el-descriptions-item>
        <el-descriptions-item label="活动名">{{viewForm.activityName}}</el-descriptions-item>
        <el-descriptions-item label="动态内容">{{viewForm.content}}</el-descriptions-item>
<!--        <el-descriptions-item label="图片/视频">-->
<!--          <el-image style="width: 200px; height: 200px" :src="viewForm.urlList" fit="fill"></el-image>-->
<!--        </el-descriptions-item>-->
      </el-descriptions>
    </el-drawer>

<!--    &lt;!&ndash;弹出查看对话框&ndash;&gt;-->
<!--    <el-dialog title="活动信息" :visible.sync="viewDialogVisible" width="50%">-->

<!--      <el-form :model="viewForm" inline ref="editForm" label-width="150px">-->

<!--        <el-form-item label="学号" prop="profileId" >-->
<!--          <el-input v-model.number="viewForm.profileId" type="text" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="真实姓名" prop="realName">-->
<!--          <el-input v-model="viewForm.realName" type="text" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号" prop="phone">-->
<!--          <el-input v-model.number="viewForm.phone" type="text" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="专业" prop="marjor">-->
<!--          <el-input v-model="viewForm.marjor" type="text" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属梯队" prop="group">-->
<!--          <el-input v-model="viewForm.group" type="text" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="呢称" prop="nickname">-->
<!--          <el-input v-model="viewForm.nickname" type="text" disabled ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="头像">-->
<!--          <el-image style="width: 200px; height: 200px" :src="viewForm.avatarUrl" fit="fill"></el-image>-->
<!--        </el-form-item>-->

<!--      </el-form>-->
<!--    </el-dialog>-->
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: 'dynamic',
  data(){
    return {
      queryInfo: {
        activityName:'',
        realName: '',//真名
        profileId:'',
        pageNum: 1,
        pageSize: 8
      },
      tableData:[],
      addDialogVisible: false,
      editDialogVisible:false,
      imageDialogVisible:false,
      editedSubmit:false,
      viewDrawer:false,
      // addedForm:false,//是否已经提交表单
      total:0,
      dialogImageUrl:'',
      // addForm:{
      //   profileId: '',
      //   realName:'',
      //   phone:'',
      //   marjor:'',
      //   group:'',
      //   nickname:'',
      //   avatarUrl:''
      // },
      // editForm:{
      //   profileId: '',
      //   realName:'',
      //   phone:'',
      //   marjor:'',
      //   group:'',
      //   nickname:'',
      //   avatarUrl:''
      // },
      viewForm:{
        profileId: '',
        realName:'',
        activityName:'',
        content:''
      },
      // editRules:{
      //   profileId:[
      //     { required: true, message: '请输入学号', trigger: 'blur' },
      //     // { type:'number', message: '请输入数字', trigger: 'blur' },
      //     // { min: 9, max:15, message: '长度至少9位 ', trigger: 'blur' }
      //   ],
      //   realName:[
      //     { required: true, message: '请输入真实姓名', trigger: 'blur' },
      //     { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
      //   ],
      //   phone:[
      //     { required: true, message: '请输入手机号', trigger: 'blur' },
      //     // { type:'number', message: '请输入数字', trigger: 'blur' },
      //     // { min: 10, max:15, message: '长度至少10位 ', trigger: 'blur' }
      //   ],
      //   marjor:[
      //     { required: true, message: '请输入专业', trigger: 'blur' },
      //     { min: 2, max: 20, message: '长度在 2 到 20 个字符 ', trigger: 'blur' }
      //   ],
      //   group:[
      //     { required: true, message: '请输入所处梯队', trigger: 'blur' },
      //     { min: 2, max: 10, message: '长度在 2 到 10 个字符 ', trigger: 'blur' }
      //   ],
      //   nickname:[
      //     { required: true, message: '请输入呢称', trigger: 'blur' },
      //     { min: 1, max: 10, message: '长度在 1 到 10 个数字 ', trigger: 'blur' }
      //   ]
      // },
      // addRules:{
      //   profileId:[
      //     { required: true, message: '请输入学号', trigger: 'blur' },
      //     { type:'number', message: '请输入数字', trigger: 'blur' },
      //     // { min: 9, max:15, message: '长度至少9位 ', trigger: 'blur' }
      //   ],
      //   realName:[
      //     { required: true, message: '请输入真实姓名', trigger: 'blur' },
      //     { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
      //   ],
      //   phone:[
      //     { required: true, message: '请输入手机号', trigger: 'blur' },
      //     { type:'number', message: '请输入数字', trigger: 'blur' },
      //     // { min: 10, max:15, message: '长度至少10位 ', trigger: 'blur' }
      //   ],
      //   marjor:[
      //     { required: true, message: '请输入专业', trigger: 'blur' },
      //     { min: 2, max: 20, message: '长度在 2 到 20 个字符 ', trigger: 'blur' }
      //   ],
      //   group:[
      //     { required: true, message: '请输入所处梯队', trigger: 'blur' },
      //     { min: 2, max: 10, message: '长度在 2 到 10 个字符 ', trigger: 'blur' }
      //   ],
      //   nickname:[
      //     { required: true, message: '请输入呢称', trigger: 'blur' },
      //     { min: 1, max: 10, message: '长度在 1 到 10 个数字 ', trigger: 'blur' }
      //   ]
      //
      // },
      addImageList:[],
      editImageList:[]


    }

  },
  created() {
    this.getDynamicList()
  },
  methods:{
    getDynamicList(){
      console.log('获取人员列表')
      axios({
        method: 'post',
        url: 'http://localhost:8088/dynamic/getdynamiclist',
        data: this.queryInfo
      }).then((res)=>{
        if(res.data.ok){
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          console.log(this.tableData)
        }
      })
    },
    filterState(value, row) {
      return row.state === value;
    },
    //重置查询，刷新页面
    resetQuery(){
      console.log('重置查询')
      this.queryInfo.profileId= ''
      this.queryInfo.realName = ''
      this.queryInfo.activityName=''
      this.queryInfo.nickname = ''
      this.getDynamicList()
    },
    // //编辑用户按钮
    // handleEdit(id){
    //   axios({
    //     method: 'get',
    //     url: `http://localhost:8088/users/${id}`
    //   }).then((res)=>{
    //     if(res.data.ok){
    //       this.editForm = res.data.data
    //       let imageUrl = {}
    //       imageUrl.url = res.data.data.avatarUrl
    //       this.editImageList.push(imageUrl)
    //       this.editDialogVisible = true
    //       console.log('获取用户信息成功！')
    //     }else {
    //       this.$message.error("获取用户数据失败！")
    //     }
    //   })
    //
    //   console.log('编辑用户')
    //
    // },
    //删除动态
    handleDelete(id){
      this.$confirm('此操作将永久删除动态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method: 'delete',
          url:`http://localhost:8088/dynamic/${id}`
        }).then((res)=>{
          if(res.data.ok){
            this.$message.success("删除成功！")
            console.log('删除成功')
            this.getDynamicList()
          }else {
            this.$message.error("删除失败！")
            console.log('删除失败')
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

      console.log('删除用户')
    },
    //查看动态信息
    handleView(id){
      axios({
        method: 'get',
        url: `http://localhost:8088/dynamic/${id}`
      }).then((res)=>{
        if(res.data.ok){
          this.viewForm = res.data.data
          // let imageUrl = {}
          // imageUrl.url = res.data.data.avatarUrl
          this.viewDrawer = true
          console.log('获取用户信息成功！')
        }else {
          this.$message.error("获取用户数据失败！")
        }
      })

      console.log('查看用户信息')
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getUsersList()
    },
    //当复选框选择发生变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // //关闭新增对话框
    // closeDialog(){
    //   //清空表单和图片
    //   this.$refs.addForm.resetFields()
    //   this.$refs.upload1.clearFiles()
    //   console.log('关闭新增对话框')
    // },
    // //关闭编辑对话框
    // closeEditDialog(){
    //   if(this.editedSubmit){
    //     let url= this.editImageList[0].url
    //     console.log(url)
    //     axios({
    //       method: 'delete',
    //       url: url
    //     }).then((res)=>{
    //       if(!res.data.ok){
    //         this.$message.error("移除图片失败！")
    //       }else {
    //         console.log("移除成功！")
    //       }
    //     })
    //     this.editedSubmit = false
    //   }
    //
    //   //清空表单和图片
    //   this.$refs.editForm.resetFields()
    //   this.editImageList=[]
    //   this.getUsersList()
    //   console.log('关闭编辑对话框')
    // },
    // //图片预览
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.imageDialogVisible = true;
    // },
    // //新增中移除图片
    // handleRemove(){
    //   console.log('移除图片')
    // },
    // //编辑中移除图片
    // handleEditRemove(){
    //   console.log('移除编辑图片')
    // },
    // //图片上传成功的钩子函数
    // filesUploadSuccess(res){
    //   this.addForm.avatarUrl = res.data
    //   //图片上传成功后提交表单
    //   axios({
    //     method: 'post',
    //     url: 'http://localhost:8088/users',
    //     data: this.addForm
    //   }).then((res)=>{
    //     if(res.data.ok){
    //       this.addDialogVisible = false
    //       this.$message.success("添加人员成功！")
    //     }else{
    //       this.$message.error('添加活动失败！')
    //     }
    //   });
    //   console.log('新增图片上传成功')
    // },
    // //编辑图片上传成功
    // filesEditUploadSuccess(res){
    //   this.editForm.avatarUrl = res.data
    //   //图片上传成功后提交表单
    //   axios({
    //     method: 'put',
    //     url: 'http://localhost:8088/users',
    //     data: this.editForm
    //   }).then((res)=>{
    //     if(res.data.ok){
    //       this.editDialogVisible = false
    //       this.$message.success("修改人员成功！")
    //     }else{
    //       this.$message.error('修改人员失败！')
    //     }
    //   });
    //
    //   console.log('编辑图片上传成功')
    // },
    // //新增图片上传失败
    // filesUploadError(){
    //   console.log('新增图片上传失败')
    //   this.$message.error("图片上上传出错，人员添加失败！")
    // },
    // //编辑图片上传失败
    // filesEditUploadError(){
    //   console.log('编辑图片上传失败')
    //   this.$message.error("图片上上传出错，人员修改失败！")
    // },
    // //取消增加表单
    // cancelAddForm(){
    //
    //   this.addDialogVisible = false
    //   console.log('取消新增按钮')
    // },
    // cancelEditAddForm(){
    //   this.editDialogVisible = false
    //   console.log('取消编辑按钮')
    // },
    // //确定按钮
    // submitForm(){
    //   console.log('新增确定提交')
    //   this.$refs.addForm.validate((valid) => {
    //     if (valid) {
    //       // this.addedForm = true
    //       this.$refs.upload1.submit()
    //     } else {
    //       alert('请填写完整！')
    //       return false;
    //     }
    //   });
    // },
    // //编辑确定按钮
    // submitEditForm(){
    //   this.$refs.editForm.validate((valid) => {
    //     if (valid) {
    //       this.editedSubmit = true
    //       this.$refs.upload2.submit()
    //     } else {
    //       alert('请填写完整！')
    //       return false;
    //     }
    //   });
    //   console.log('编辑确定提交')
    // },
    // //改变启用状态
    // enableChanged(user){
    //   axios({
    //     method: 'put',
    //     url: `http://localhost:8088/users/${user.id}/${user.enabled}`
    //   }).then((res)=>{
    //     if(!res.data.ok){
    //       this.$message.error("修改启用状态失败！")
    //     }else{
    //       this.$message.success("修改启用状态成功！")
    //       console.log("修改启用状态成功！")
    //     }
    //   })
    // }



  }

}

</script>

<style scoped>


</style>
